<!--
 * @Date: 2023-03-22 13:36:18
 * @LastEditTime: 2023-04-14 20:52:51
 * @FilePath: /nlk/src/views/home/components/coininfo.vue
 * 介绍:首页.币种信息
-->
<script lang="ts" setup>
import { formatNumber, _require } from "@@/utils/tools/tools";
import { HomeData, apiAirdrop } from "@@/api/page/home";
import useBalanceStore from "@@/store/useBalanceStore";
import { useCurrentData } from "@@/hooks/date";
import dayjs from "dayjs";
import { getCountdown } from "@@/utils/tools/date";

const { t } = useI18n();

const balanceStore = useBalanceStore();
const { ethCoinEnum } = storeToRefs(balanceStore);
const props = defineProps<{
  coins: HomeData.CoinsItem[] | undefined;
  lastAirdropTime: string;
}>();
const vcDate = reactive({
  /**上次领取空投的时间 */
  lastAirdropTime: dayjs(props.lastAirdropTime),
  /**领取空投按钮 */
  airdropLoading: false,
});
/**领取空投 */
async function airdrop() {
  vcDate.airdropLoading = true;
  const res = await apiAirdrop();
  vcDate.airdropLoading = false;
  if (res === true) vcDate.lastAirdropTime = dayjs();
}
const { currentDate } = useCurrentData();
watch(
  () => props.lastAirdropTime,
  (newValue) => (vcDate.lastAirdropTime = dayjs(newValue)),
  { deep: true }
);
/**计算按钮文本 */
function getBtnText() {
  const maturity = vcDate.lastAirdropTime.add(1, "day");
  if (maturity.isBefore(currentDate.value)) return t("ling-qu");
  const tm = getCountdown(currentDate.value, maturity);
  return `${tm.h}:${tm.m}:${tm.s}`;
}
</script>

<template>
  <Ccard class="coininfo">
    <Cgrid col="2">
      <div @click="$router.push({ name: 'KLine' })" class="USDTCard grid-item">
        <Rimage
          height="120rem"
          width="120rem"
          class="MT-sm"
          :src="ethCoinEnum.NLK?.logo"
        />
        <h3>NLKS</h3>
        <Rimage
          height="90rem"
          width="90rem"
          class="USDTCard_decoration"
          :src="_require('src/assets/images/home/decoration__2.png')"
        />
        <div class="flex-J-SB flex-A-C MT-xl">
          <div class="flex-A-B">
            <h3>100%+</h3>
            <span class="T-S-sm">APY</span>
          </div>
          <VanButton
            @click.stop="airdrop"
            :loading="vcDate.airdropLoading"
            class="receiveBtn"
            color="var(--C-M1)"
            size="small"
            round
          >
            {{ getBtnText() }}
            <!-- {{ $t("ling-qu") }} -->
          </VanButton>
        </div>
      </div>
      <Cgrid v-for="coin in coins" class="grid-item" col="100rem 1fr">
        <Rimage
          height="50erm"
          width="50rem"
          :src="ethCoinEnum[coin.code]?.logo"
        />
        <div>${{ formatNumber(coin.price) }}</div>
        <div class="C-T3">{{ coin.code }}</div>
        <CplusMinus :value="coin.change" format="{value}%"> </CplusMinus>
      </Cgrid>
    </Cgrid>
  </Ccard>
</template>

<style lang="less" scoped>
.coininfo {
  .grid-item {
    padding: var(--gap-sm);
    border-radius: var(--R-sm);
    border: var(--C-OT1) solid 1rem;
    height: 100%;
    width: 100%;
    .receiveBtn {
      min-width: 4em;
    }
  }
  .USDTCard {
    position: relative;
    grid-row: 1 / span 2;
    background-image: linear-gradient(0deg, var(--C-OT0), var(--C-OT1));
    text-align: center;
    .USDTCard_decoration {
      position: absolute;
      right: 0;
      bottom: 80rem;
    }
  }
}
</style>
